<template>
    <div>
        <el-row type="flex" justify="space-between">
            <el-form class="serach-form" ref="searchForm" :model="searchForm" :inline="true" @submit.native.prevent>
                <el-form-item v-if="isMuilUnitUser">
                    <el-select filterable @change="search" v-model="searchForm.orgIds" placeholder="请选择参演单位">
                        <el-option label="全部参演单位" :value="$store.state.userinfo.organizationIds"></el-option>
                        <el-option
                            v-for="item in orgList"
                            :key="item.organizationId"
                            :label="item.shortName"
                            :value="item.organizationId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item >
                    <!-- 日期范围 -->
                    <el-date-picker
                        v-model="searchForm.time"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        :picker-options="utils.intTimePickerOptions()"
                        @change="search">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-input
                        placeholder="请输入标题"
                        v-model="searchForm.content"
                        @keyup.enter.native="search"
                        clearable>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="form-search-btn" type="primary" @click="search">查询</el-button>
                </el-form-item>
            </el-form>
            <div class="more-btns">
                <el-dropdown @command="handleCommand">
                    <span class="el-dropdown-link">更多操作</span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="add">新增</el-dropdown-item>
                        <el-dropdown-item command="batchDeletion">批量删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-row>
        <el-row class="overclick-wrap" :gutter="40" type="flex" justify="space-between">
            <el-col :span="24">
                <div class="item-wrap">
                <div class="item-content">
                    <p class="item-value color-4">{{ total }}</p>
                    <p class="item-title">演习总次数</p>
                </div>
                </div>
            </el-col>
        </el-row>
        <div>
            <el-table
                v-loading="loading"
                ref="examPaperTableList"
                :data="tableData"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column label="序号" type="index" width="50"></el-table-column>
                <el-table-column v-if="isMuilUnitUser" label="参演单位" prop="orgNames"></el-table-column>
                <el-table-column label="封面" prop="coverPic" width="100">
                    <template slot-scope="scope">
                        <img v-if="scope.row.coverPic" 
                            :src="scope.row.coverPic"  
                            width="50"
                            height="50" 
                            @click="$imgPreview" 
                            :data-imgpreview="scope.row.coverPic"/>
                        <p v-else>暂无封面</p>
                    </template>
                </el-table-column>
                <el-table-column label="标题" prop="title"></el-table-column>
                <el-table-column label="演习时间">
                    <template slot-scope="scope">
                        <p>{{ scope.row.startTime + '至' + scope.row.endTime }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button @click="handleDetail(scope.row)" type="text" size="small">详情</el-button>
                        <span class="dividing-line">|</span>
                        <el-button @click="editFireDrillInfo(scope.row)" type="text" size="small">编辑</el-button>
                        <span class="dividing-line">|</span>
                        <el-button @click="deleteFireDrill(scope.row.id)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                background
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                :current-page.sync="currentPage"
                :page-sizes="[10, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <!-- 新增/编辑消防演习弹框 -->
        <el-dialog
            :close-on-click-modal="false"
            :title="dialogTitle"
            width="1000px"
            top='10vh'
            v-if="dialogFireDrill"
            :visible.sync="dialogFireDrill"
            @close="closeFireDrillInfo"
            v-dialogDrag>
            <fire-drill-info :oldInfo="currentFireDrillInfo" :closeFun="closeFireDrillInfo"></fire-drill-info>
        </el-dialog>
        <!-- 消防演习详情 -->
        <el-dialog
            :close-on-click-modal="false"
            title="消防演习详情"
            width="1000px"
            top='10vh'
            customClass="dialog-exam-paper-view"
            v-if="dialogFireDrillView"
            :visible.sync="dialogFireDrillView"
            @close="closeFireDrillView"
            v-dialogDrag>
            <fire-drill-info-view :oldInfo="currentFireDrillInfo" :closeFun="closeFireDrillView"></fire-drill-info-view>
        </el-dialog>
    </div>
</template>
<script>
import utils from '@/utils/util'
import { getOrgList } from '@/api/org'
import { getDrillRecordList, delDrillRecord } from '@/api/emergencyPlan'
import FireDrillInfo from './Dialog/FireDrillInfoFrom'
import FireDrillInfoView from './Dialog/FireDrillInfoView'

export default {
    name: 'FireDrillList',
    components: {
        FireDrillInfo,
        FireDrillInfoView
    },
    data() {
        return {
            loading: true,
            utils: utils,
            orgList: [],
            isMuilUnitUser: this.$store.state.userinfo.isMuilUnitUser,
            searchForm: {
                orgIds: this.$store.state.userinfo.isMuilUnitUser ? this.$store.state.userinfo.organizationIds : this.$store.state.userinfo.org.id,
                time: '',
                content: ''
            },
            tableData: [],
            selectedFireDrill: [], // 勾选的消防演习
            // 分页
            currentPage: 1,
            pageSize: 10,
            total: 0,
            dialogTitle: '新增消防演习',
            currentFireDrillInfo: {}, // 当前操作的试卷信息
            dialogFireDrill: false,
            dialogFireDrillView: false,
        }
    },
    created() {
        if(this.isMuilUnitUser) {
            // 获取业主单位信息
            getOrgList({
                queryType: 0
            }).then(res => {
                if(res.status = 200) {
                    this.orgList = res.data
                }
            })
        }
        this.search()
    },
    methods: {
        // 获取列表数据
        getTableData(pageIndex, pageSize) {
            let that = this
            that.loading = true
            if (pageIndex) {
                that.currentPage = pageIndex
            }
            if (pageSize) {
                that.pageSize = pageSize
            }
            getDrillRecordList({
                orgIds: that.searchForm.orgIds,
                startTime: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[0] + ' 00:00:00' : '', // 创建时间
                endTime: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[1] + ' 23:59:59' : '',
                title: that.searchForm.content, // 标题
                pageIndex: that.currentPage - 1,
                pageSize: that.pageSize,
                queryType: 1
            }).then(res => {
                if(res.status === 200) {
                    that.tableData = res.data
                    that.total = res.total
                }
                that.loading = false
            })
            
        },
        handleSizeChange(pageSize) {
            this.getTableData(1, pageSize)
        },
        handleCurrentChange(currentPage) {
            this.getTableData(currentPage)
        },
        search() {
            this.getTableData(1)
        },
        // 多选
        handleSelectionChange(val) {
            this.selectedFireDrill = val
        },
        // 更多操作
        handleCommand(command) {
            let that = this

            switch (command) {
                case 'add':
                    that.addFireDrill()
                    return false
                case 'batchDeletion':
                    that.batchDeletion()
                    return false
                default:
                    return false
            }
        },
        // 新增
        addFireDrill() {
            this.dialogTitle = '新增消防演习'
            this.currentFireDrillInfo = {}
            this.dialogFireDrill = true
        },
        // 批量删除
        batchDeletion() {
            let ids = []
            for(let i=0, len=this.selectedFireDrill.length; i < len; i++) {
                ids.push(this.selectedFireDrill[i].id)
            }
            if(ids.length > 0) {
                // 调用删除
                this.deleteFireDrill(ids.join(','))
            } else {
                this.$message({
                    type: 'warning',
                    message: '请勾选你要删除的消防演习!'
                })
                return false
            }
        },
        // 查看详情
        handleDetail(info) {
            this.currentFireDrillInfo = info
            this.dialogFireDrillView = true
        },
        // 关闭消防演习详情弹框
        closeFireDrillView() {
            this.dialogFireDrillView = false
        },
        // 编辑
        editFireDrillInfo(info) {
            let that = this

            that.dialogTitle = '编辑消防演习'
            that.currentFireDrillInfo = info
            that.dialogFireDrill = true
        },
        // 关闭消防演习编辑弹框
        closeFireDrillInfo(refresh) {
            this.dialogFireDrill = false
            if(typeof(refresh) === 'boolean' && refresh) {
                this.getTableData(this.currentFireDrillInfo.title?'':1)
            }
        },
        // 删除
        deleteFireDrill(ids) {
            let that = this

            this.$confirm("确定删除？", '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                roundButton: true
            }).then(() => {
                delDrillRecord({
                    ids: ids
                }).then(res => {
                    if(res.status === 200) {
                        that.$message.success('删除成功！')
                        // 刷新列表和统计
                        that.search()
                    }
                })
            }).catch(() => {

            })
        },
    }
}
</script>
